<template>
    <!--
v-for 指令 是循环渲染
有一些特殊的操作你 item in items 这样语法的形式比较特殊 item是别名  items是数组的名字
语法：
v-for="item in items"
v-for="(item,index) in items" index 是索引值
v-for="(item,index) in items" :key="index" 这里的key是必须的 也是唯一标识 一般都是根据id 或者唯一值

-->
    <!--数组翻转，数组截取， 数组更新-->
    <ul>
        <li v-for="(item ,index) in resarr" :key="index"> {{ item }}</li>
    </ul>
    <button @click="reverseBtn">数组翻转</button> &nbsp;
    <button @click="sliceBtn">数组截取</button>&nbsp;
    <button @click="updateBtn">数组更新</button>
    <button @click="filterBtn">数组过滤</button>
    <hr>
    <div>
        <h1>V-for 循环渲染操作</h1>
        <p>学生信息：</p>
        <ul>
            <!--哪个标签需要循环展示就在哪个标签上写 v-for指令-->
            <li v-for="(item,index) in arr">{{ item }} --- {{ index}}</li>
        </ul>
        <p>学生详细信息：</p>
        <li v-for="item in stuarr" :key="item.id">
            <span>{{ item.name }}</span>-
            <span>{{ item.age }}</span>-
            <span>{{ item.sex }}</span>
        </li>
        <p>老师的信息：</p>
        <div v-for="(item,index) in stobj">
            {{ index }} - {{ item }}
        </div>
    </div>
</template>
<script>
import Von from '../components/Von.vue'
export default {
    data() {
        return {
            arr: ['萧炎', '雅菲', '小医仙', '彩麟'],
            stuarr: [
                {
                    id: 101,
                    name: '叶凡',
                    age: 18,
                    sex:'男'
                },
                {
                    id: 102,
                    name: '妖女',
                    age: 18,
                    sex: '女'
                },
                {
                    id: 103,
                    name: '姬无月',
                    age: 16,
                    sex: '女'
                },
            ],
            stobj: {
                name: '药老',
                age: '101',
                class:'斗尊药皇'
            },
            resarr: [1, 2, 3, 4, 5, 6],
            newarr: [7, 8, 9]


        }
    },
    methods: {
        reverseBtn() {
            this.resarr.reverse()
        },
        sliceBtn() {
            //数组截取 不会对原数组产生影响 也就是不会触发v-for的更新
            // 需要赋值操作 才会触发v-for的更新操作
            this.resarr = this.resarr.slice(0, 3)
        },
        updateBtn() {
            // this.resarr.push(7)
            // this.resarr[6]=8
            // let newarr = [7, 8, 9]
            // this.resarr.push(...newarr)
            let narr = this.resarr.concat(this.newarr)
            console.log(narr);
            this.resarr = narr
        },
        filterBtn() {
            //filter() 过滤数组内容
            // filter(val,index,resarr) val是当前值 index 是索引值 resarr 是原数组 返回一个新数组 不改变原来的数组内容

            let filterarr = this.resarr.filter(function (val, index, resarr) {
                return val > 3
            })
            console.log(filterarr);
            //需要重新赋值 才会触发v-for的更新操作

            this.resarr = filterarr
        }
    }
}
</script>
<style scoped>
/*scoped 表示只针对当前vue里面的DOM标签样式 */
li{
    list-style: none;
}
</style>